H5分享功能

发表于 | 分类于

总结在h5社交分享功能的实现

目录大纲

  1. 背景需求
  2. 一个示例
  3. 相关概念（开放图谱，分享调试器）
  4. 各种分享的注意事项

背景需求

将活动链接以及关键字分享到主流社交媒介，是推广活动的一种有效方式
logo

如何定制化分享卡片【重点】
share

示例

  1. 在项目的入口html文件加入以下meta元素
    这谢保证了本网站能够被分享的时候，爬虫爬到信息去定制化卡片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
       <!-- facebook, whatsapp, messenger, Linkedin-->
       <meta property="fb:app_id"        content="654251068316377" />
       <meta property="og:url"           content="http://if-sit-src.zatech.com/if/html-template-file/share/share.html" />
       <meta property="og:type"          content="website" />
       <meta property="og:title"         content="title haha" />
       <meta property="og:description"   content="description haha" />
    <meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
       <meta name="twitter:title"   content="my twitter title" />
       <meta name="twitter:description"   content="my twitter description" />
       <meta name="twitter:image" content="@ViewBag.ShareImg" />
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:url"   content="当前分享的链接--可要可不要" />

  2. 在需要分享的按钮写点击事件

    1
    2
    3
    4
    5
    6
    // <button onClick={handleShare}>Facebook分享</button> ,以这个为例子，其他类似，只是不同分享途径的链接不同
    // shareLink 是你想要分享的站点地址
    function handleShare () {
      let jumpLink = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(shareLink)
      window.open(jumpLink, '_blank')
    }

原理和探索

开放图谱

Open Graph是一套由Facebook定义的mata协议，主要放在HTML的meta标签里，目前也可以在iOS和Android系统中使用。Open Graph想实现的目的也非常的简单，主要是期望使用人将互联网的各种事物联系起来。

开放图谱对象包含属性。属性是指以不同方式描述对象的元素，这些元素由开放图谱标签表示，或在使用对象 API 创建的对象中赋予属性。

facebook, whatsapp, messenger, Linkedin

1
2
3
4
5
6
7
<!-- facebook, whatsapp, messenger, Linkedin-->
      <meta property="fb:app_id"        content="654251068316377" />
      <meta property="og:url"           content="http://if-sit-src.zatech.com/if/html-template-file/share/share.html" />
      <meta property="og:type"          content="website" />
      <meta property="og:title"         content="title haha" />
      <meta property="og:description"   content="description haha" />
			<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">

twitter

1
2
3
4
5
6
<!-- 推特 -->
      <meta name="twitter:title"   content="my twitter title" />
      <meta name="twitter:description"   content="my twitter description" />
      <meta name="twitter:image" content="@ViewBag.ShareImg" />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:url"   content="当前分享的链接--可要可不要" />

分享调试器

【Facebook】:https://developers.facebook.com/tools/debug/sharing/

【领英】：https://www.linkedin.com/post-inspector/inspect/

【微信】：微信开发者工具

示例： Facebook调试器结果（http://if-sit-src.zatech.com/if/html-template-file/share/share.html）

  1. 可以预览分享结果
  2. 可以看查看分享的配置警告
  3. 可以主动重新爬虫抓取

debug

具体分享方式以及存在问题

facebook

链接：’https://www.facebook.com/sharer.php?u=‘ + encodeURIComponent(link)

  1. 图片抓取原则

    • 无论是用网址分享还是调用sdk弹出分享框， 都会优先取所分享的网址的meta定制的信息；
    • 所分享的网页如果没有相关的meta，那么则会用自己抓取符合的图片作为分享的logo

  2. 图片显示问题

如果图片过小,则预览时显示错误的图片，或不显示， 或显示正确设定的图片（不稳定）

解决：图片不小于200*200， 且比例最好是1.9 ：1 [官方文档]

  1. 缓存问题

如果网站更换想要展示的缩略图，再次分享可能不起作用，展示的还是原来的图片

原因： facebook默认会有1个月的缓存期，在一个月内若没有重新爬取，则会显示旧的。所以当网站有变更缩略图，需要主动去调试工具重新抓取1次即可。

  1. 第1个分享的人，会看不到缩略图

因为爬虫需要先看到1次数据，所以默认第一次都不会显示定义的图片等

解决： 可以自己先进行一次分享（作为第1次分享）

  1. 如果是SDk调用， 需要在facebook开发平台做配置（添加分享网址…）,以及发布开发平台上的项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.fbAsyncInit = function() {
          FB.init({
            appId            : '654251068316377',
            autoLogAppEvents : true,
            xfbml            : true,
            version          : 'v4.0'
          });
          FB.AppEvents.logPageView();
        };
        (function(d, s, id){
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = "https://connect.facebook.net/en_US/sdk.js";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
      </script>
      <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script> -->

messenger [打开app分享]

Step1: 定义og的开放图谱

Step2: fb-messenger协议调起系统应用：

‘fb-messenger://share?link=’ + encodeURIComponent(link) + ‘&app_id=1234’

注意： 图片大小和facebook规则一致

所分享的link需要编码

whatsapp [打开app分享]

Step1: 定义og的开放图谱

Step2: 协议，’whatsapp://send?text=’ + encodeURIComponent(link)

注意： 图片小于300kb，

**图片大于300 * 200 像素**

缓存问题，重试需要重启whatsapp应用

复制链接分享

利用浏览器可以复制表单元素，制造表单元素，将需要复制的链接作为value

1
2
3
4
5
6
7
8
9
10
11
12
handleCopy (text, cbSuccess, cbError) {
    text = text || 'https://languapp.com/url/abc'
    const $input = document.createElement('input')
    document.body.appendChild($input)
    $input.setAttribute('value', text)
    $input.select()
    if (document.execCommand('copy')) {
      document.execCommand('copy')
      cbSuccess()
    }
    document.body.removeChild($input)
  }

二维码

将所需要分享的链接生成二维码即可

twitter

  1. 开放图谱
1
2
3
4
5
6
<!-- 推特 -->
      <meta name="twitter:title"   content="my twitter title" />
      <meta name="twitter:description"   content="my twitter description" />
      <meta name="twitter:image" content="@ViewBag.ShareImg" />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:url"   content="当前分享的链接--可要可不要" />
  1. 链接： ‘http://twitter.com/share?url=‘ + link

Linkedin

链接形式： og开放图谱 + 链接

              '[http://www.linkedin.com/shareArticle?url=](http://www.linkedin.com/shareArticle?url=)' + link

SDK: 发起POST 请求, 官方有配置参数说明https://api.linkedin.com/v2/ugcPosts

两种形式均可实现定制化

表现形式：在pc自动调起网页

在h5自动调起App

pinterest

使用： <script>脚本 + 链接

脚本： <script type="text/javascript" async src="[//assets.pinterest.com/js/pinit.js](notion://assets.pinterest.com/js/pinit.js)"></script>

链接：'[https://www.pinterest.com/pin/create/button/?url=](https://www.pinterest.com/pin/create/button/?url=)' + link

新浪微博

链接： '[http://v.t.sina.com.cn/share/share.php?appkey=4120396272&title=](http://v.t.sina.com.cn/share/share.php?appkey=4120396272&title=)' + encodeURIComponent(jumpTitle)+ '&url=' + encodeURIComponent(link)

暂时缩略图无效

qq空间

注意： 需要在跳转链接后面直接加配置参数， 不识别og开放图谱

**title， pics， summary 参数 来实现定制化功能**

链接： ‘https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + link + ‘?sharesource=qzone&title=haha&pics=’ + imgLink + ‘&summary=desc’

break;

Tumblr

可以读开放图谱设置定制化分享信息

jumpLink = ‘http://tumblr.com/widgets/share/tool?canonicalUrl=‘ + encodeURIComponent(link)

可配置官方按钮+分享计数

参考官方链接： https://www.tumblr.com/docs/zh/share_button

Reddit

不支持开放图谱

需要在链接后面配置参数：resubmit && title

不支持图片，仅分享标题和链接

jumpLink = ‘https://www.reddit.com/r/gaming/submit?url=‘ + encodeURIComponent(link) + ‘&resubmit=true&title=’ + ‘hello, test title’

微信 / 朋友圈 /qq

分享的链接必须是js安全域名里中所包含

Step1:  需要企业号，需确保已获得使用对应JS接口的权限

Step2: 配置可访问的域名

Step3: 代码层面

1，引入微信JS-SKD

2，定义分享卡片参数 //参考微信公众平台

3，wx.config({}) //配置微信公众平台的必填参数

4，wx.ready(function(){ // wx.调用对应的方法 }) // 参考微信公众平台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
wechat (link) {
        // 定制的分享内容卡片
        let shareContent = {
          imgUrl: "http://pollosweb.wesped.es/programa_pollos/play.png", //分享图，默认当相对路径处理，所以使用绝对路径的的话，“http://”协议前缀必须在。
          desc: "你对页面的描述", //摘要,如果分享到朋友圈的话，不显示摘要。
          title: '分享卡片的标题', //分享卡片标题
          link: link, //分享出去后的链接，这里可以将链接设置为另一个页面。
          success: function(){//分享成功后的回调函数
          },
          cancel: function () { 
              // 用户取消分享后执行的回调函数
          }
        }

        // 需要去公众平台获取以下必填参数
        wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: '', // 必填，公众号的唯一标识
          timestamp: '', // 必填，生成签名的时间戳
          nonceStr: '', // 必填，生成签名的随机串
          signature: '',// 必填，签名
          jsApiList: [onMenuShareAppMessage, onMenuShareTimeline, onMenuShareQQ] // 必填，需要使用的JS接口列表
        });

        // 进行调用
        wx.ready(function () {
          wx.onMenuShareAppMessage(share_config.share);//分享给好友
          wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
          wx.onMenuShareQQ(share_config.share);//分享给手机QQ
        })
      }

总结

在各种分享中可能会遇到以下问题：

  1. 定制化图片不显示
  2. 缓存机制导致更新定制化内容再次分享没有更新效果
  3. 链接分享和SDK之间的选择
  4. SDK权限问题
  5. 一定要使用分享调试器去进行调试，或者更新后的重新抓取

参考

【facebook】https://developers.facebook.com/docs/sharing

【whatsapp】https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing?noredirect=1&lq=1

【微信】http://caibaojian.com/wxshare-config.html

【推特】https://cards-dev.twitter.com/validator

【领英官方】[https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin?context=linkedin/consumer/context#create-an-article-or-url-share](

-------------本文结束 感谢您的阅读-------------
请我吃辣条吖~